<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会动的方块2</title>
		<style type="text/css">
			.box{
				width: 20px;
				height: 20px;
				background-color: pink;
				/* 相对于浏览器进行定位 */
				position: fixed;
				/* 距离浏览器左边的位置 */
				left: 0px;
				/* 距离浏览器上边的位置 */
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div class="box" id="boxId"></div>

		<script type="text/javascript">
			//一个 = 叫赋值（右给左） 两个 == 叫判断
			//浏览器的宽
			var windowX = window.innerWidth;
			//浏览器的高
			var windowY = window.innerHeight;
			var boxId = document.getElementById("boxId");//通过id寻找标签
			var left = 0;//创建一个变量名字叫left
			var isLeft = true;//正在往左跑 boolean类型 只有 true（是）和 false （否）两种状态
			var myTop = 0;
			var isTop = true;
			function move(){//moveLeft函数 函数的代码必须通过事件驱动
				if(isLeft == true){//判断是否正在往左跑
					left++;//自身加1
				}else{
					left--;//自身减1
				}
				if(isTop == true){//上下的
					myTop++;//自身加1
				}else{
					myTop--;//自身减1
				}
				
				
				//在赋值之前要进行判断
				if(left+20 == windowX){
					isLeft = false;
				}
				if(left == 0){
					isLeft = true;
				}
				
				if(myTop+20 == windowY){
					isTop = false;
				}
				if(myTop == 0){
					isTop = true;
				}
				
				
				
				boxId.style.left = left+"px";//修改标签样式
				boxId.style.top = myTop+"px";
			}
			//0.001秒执行一次
			setInterval("move()",1);
		</script>
	</body>
</html>
